<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/11/3
  Time: 19:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${pageContext.request.contextPath}/assets/images/favicon.png" type="image/png">
    <title>秒杀活动列表</title>

    <!-- BEGIN PAGE LEVEL STYLES -->
    <link href="${pageContext.request.contextPath}/assets/plugins/datatables/css/jquery.dataTables.min.css"
          rel="stylesheet" type="text/css"/>
    <link href="${pageContext.request.contextPath}/assets/plugins/datatables/css/jquery.dataTables-custom.css"
          rel="stylesheet" type="text/css"/>
    <!-- END PAGE LEVEL STYLES -->
    <link href="${pageContext.request.contextPath}/assets/css/icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]-->
    <script src="${pageContext.request.contextPath}/js/html5shiv.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/respond.min.js"></script>
    <!--[endif]-->

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .el-card__body {
            padding: 20px;
            background-color: white;
            font-size: 14px;
            border: solid 1px rgba(0, 0, 0, 0.2);
        }

        .el-table th {
            white-space: nowrap;
            overflow: hidden;
            user-select: none;
            padding: 12px 0;
            min-width: 0;
            box-sizing: border-box;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
        }

        .el-table--border th {
            border-right: 1px solid #ebeef5;
        }


        .el-table--border td {
            border-bottom: 1px solid #ebeef5;
        }


        label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
        }

        .table-responsive {
            min-height: .01%;
            overflow-x: auto;
        }

        /*窗口*/
        .window {
            padding-top: 20px;
            padding-bottom: 30px;
            border-radius: 2px;
            box-shadow: 0 0 3px grey;
            background-color: #fff;
            position: fixed;
            left: 0;
            top: 150px;
            display: none;
            z-index: 10;
        }

        @media (max-width: 992px) {
            .window form .form-control {
                margin-bottom: 20px;
            }
        }

        @media (min-width: 992px) {
            .window form .opt {
                text-align: right;
            }
        }

        /*中间层*/
        .not-active {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(0, 0, 0, .5);
            z-index: 5;
        }

        #shade {
            display: none;
        }

        /*关闭弹窗按钮*/
        .window #close-window {
            border: 0;
            outline: none;
            background-color: #fff;
        }

        .window #close-window .btn:hover {
            color: deepskyblue;
        }

        .btn-default {
            border: 0;
            outline: 0;
            background-color: #fff;
            color: rgb(14, 144, 210);
        }

        .btn-default:hover, .btn-default:focus, .btn-default:active:focus, .btn-default:after {
            color: rgb(14, 144, 210);
            background-color: #fff;
        }

        .btn:focus, .btn:active:focus {
            outline: none;
            box-shadow: none;
        }

        /*分页相关*/
        .pagination > li > button {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #337ab7;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #eee;
        }

        .pagination > .disabled > button, .pagination > .disabled > button:focus, .pagination > .disabled > button:hover {
            color: #777;
            cursor: not-allowed;
            background-color: #fff;
            border-color: #eee
        }

        .pagination > li > select, .pagination > li > button, .pagination > li > form {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #ddd;
        }

        .pagination > li > form > input {
            outline: none;
        }

        .pagination > li > span:hover {
            background-color: #fff;
        }
    </style>

</head>

<body class="sticky-header">

<!--Start left side Menu-->
<jsp:include page="../inc/left.jsp"/>
<!--End left side menu-->


<!-- main content start-->
<div class="main-content">

    <!-- header section start-->
    <jsp:include page="../inc/header.jsp"/>
    <!-- header section end-->

    <div class="wrapper" style="background-color:rgb(238, 238, 238);">

        <!--Start Page Title-->
        <div class="page-title-box">
            <p class="page-title" style="color: black">秒杀活动列表<small style="font-size: 14px;">&emsp;谢登宇</small></p>
            <ol class="breadcrumb">
                <li>
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">营销</a>
                </li>
                <li class="active">
                    专题推荐
                </li>
            </ol>
            <div class="clearfix"></div>
        </div>
        <!--End Page Title-->

        <div class="el-card__body col-sm-12" style="margin-bottom: 15px">
            <i class="fa fa-search" aria-hidden="true"></i> <span>筛选搜索</span>
            <div style="margin-top: 15px;">
                <form class="el-form el-form--inline form-group">
                    <div class="el-form-item el-form-item--small">
                        <div class="el-form-item__content">
                            <div class="input-width">
                                <div class="col-sm-1 text-right" style="padding-right: 0">
                                    <label class="" style="padding-top: 7px;">专题名称：</label>
                                </div>
                                <div class="col-sm-3">
                                    <input id="subjectName" type="text" autocomplete="off"
                                           placeholder="专题名称"
                                           class="el-input__inner form-control">
                                </div>
                                <div class="el-input el-input--small el-input--suffix col-sm-1 text-right"
                                     style="padding-right: 0"><!---->
                                    <label class="el-form-item__label" style="padding-top: 7px;">
                                        推荐状态：
                                    </label>
                                </div>
                                <div class="col-sm-2">
                                    <select type="" autocomplete="off" placeholder="全部" readonly="readonly"
                                            class="el-input__inner form-control" id="recommendStatus">
                                        <%--                                                    <span class="el-input__suffix">--%>
                                        <%--                                                        <span class="el-input__suffix-inner">--%>
                                        <%--                                                            <i class="el-select__caret el-input__icon el-icon-arrow-up"></i>--%>
                                        <%--                                                        </span>--%>
                                        <%--                                                    </span>--%>
                                        <option value="">全部</option>
                                        <option value="1">推荐中</option>
                                        <option value="0">未推荐</option>
                                    </select>
                                </div>

                                <div class="col-sm-4 col-sm-offset-1">
                                    <button type="button" class="btn btn-info"
                                            style="float: right;" onclick="subjectSearch()">
                                        <span>查询搜索</span>
                                    </button>
                                    <button id="reset-search" type="button" class="btn btn-white"
                                            style="float: right; margin-right: 15px;" >
                                        <span>重置</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="el-card__body col-sm-12">
            <i class="fa fa-file-text-o" aria-hidden="true"></i>
            <span style="font-size: 16px;">数据列表</span>
            <div style="float: right">
                <a href="${pageContext.request.contextPath}/sell/addRecommendProject">
                    <button type="button" class="btn btn-info"
                            style="margin-right: 20px;">
                        <span>添加专题</span>
                    </button>
                </a>
            </div>
        </div>

        <!--Start row-->
        <div class="row">
            <div class="col-md-12">
                <div class="white-box" style="border: solid 1px rgba(0,0,0,0.2); margin-top: 15px">
                    <br>
                    <div class="table-responsive">
                        <div id="example_wrapper" class="dataTables_wrapper">
                            <table id="example" class="table table-bordered">
                                <thead>
                                <tr>
                                    <th style="text-align: center"><input type="checkbox" id="input-all"></th>
                                    <th style="text-align: center">编号</th>
                                    <th style="text-align: center">专题名称</th>
                                    <th style="text-align: center">是否推荐</th>
                                    <th style="text-align: center">排序</th>
                                    <th style="text-align: center">状态</th>
                                    <th style="text-align: center">操作</th>
                                </tr>
                                </thead>
                                <tbody id="123">
                                <c:forEach items="${pageMadel.list}" var="r">
                                    <tr>
                                        <td style="text-align: center"><input type="checkbox" id="checks"></td>
                                        <td id="#ddd" style="text-align: center">${r.id}</td>
                                        <td style="text-align: center">${r.subjectName}</td>
                                        <td style="text-align: center">
                                            <c:if test="${r.recommendStatus==1}">
                                                <i class="fa fa-toggle-on" aria-hidden="true"
                                                   style="color: #0e90d2;font-size: 30px"
                                                   onclick="changeStatus(${r.recommendStatus},${r.id})"></i>
                                            </c:if>
                                            <c:if test="${r.recommendStatus==0}">
                                                <i class="fa fa-toggle-off" aria-hidden="true" style="font-size: 30px"
                                                   onclick="changeStatus(${r.recommendStatus},${r.id})"></i>
                                            </c:if>

                                        </td>
                                        <td style="text-align: center">${r.sort}</td>
                                        <td style="text-align: center">
                                            <c:if test="${r.recommendStatus==1}">
                                                推荐中
                                            </c:if>

                                            <c:if test="${r.recommendStatus==0}">
                                                未推荐
                                            </c:if>
                                        </td>


                                        <td style="text-align: center">
                                            <button class="btn btn-info" onclick="shezhi(${r.id})">设置排序</button>
                                            <button id="btn-delete" class="btn btn-danger" onclick="del(${r.id})">删除
                                            </button>
                                        </td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                            <nav aria-label="..." style="text-align: left">
                                <ul class="pagination" id="abcd">
                                    <li><span style="border-radius: 0">共 ${pageMadel.count} 条数据</span></li>
                                    <li>
                                        <select id="520" name="size" style="outline: none; padding: 5.5px 12px" onchange="change111()">
                                            <option value="5" ${pageMadel.size==5?"selected":""}>5/页</option>
                                            <option value="20" ${pageMadel.size==20?"selected":""}>20条/页</option>
                                            <option value="30" ${pageMadel.size==30?"selected":""}>30条/页</option>
                                            <option value="50" ${pageMadel.size==50?"selected":""}>50条/页</option>
                                        </select>
                                    </li>
                                    <%--Start 上一页按钮--%>
                                    <c:if test="${pageMadel.page>1}">
                                        <li><a href="recommend?page=${pageMadel.page-1}">&laquo;</a></li>
                                    </c:if>
                                    <%--End 上一页按钮--%>
                                    <%--Start 页码--%>
                                    <c:forEach begin="1" end="${pageMadel.pageSize}" var="i">
                                        <li class="${pageMadel.page==i?"active":""}"><a
                                                href="recommend?page=${i}">${i}</a></li>
                                    </c:forEach>
                                    <%--End 页码--%>
                                    <%--Start 下一页按钮--%>
                                    <c:if test="${pageMadel.page<pageMadel.pageSize}">
                                        <li><a href="recommend?page=${pageMadel.page+1}">&raquo;</a></li>
                                    </c:if>
                                    <%--End 下一页按钮--%>

                                    <%-- Start 页码跳转 --%>
                                    <li><span>前往</span></li>
                                    <li>
                                        <form action="recommend?page=" style="width: 40px;padding: 6px 0">
                                            <input name="page" style="width: 40px;text-align: center;outline: none;border: 0">
                                        </form>
                                    </li>
                                    <li><span>页</span></li>
                                    <%-- End 页码跳转 --%>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End row-->
    </div>

    <!--Start  Footer -->
    <%@include file="../inc/footer.jsp" %>
    <!--End footer -->

</div>
<!--End main content -->


<!--Begin core plugin -->
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/plugins/moment/moment.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.slimscroll.js "></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.nicescroll.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/functions.js"></script>
<!-- End core plugin -->

<!--Begin Page Level Plugin-->
<%--<script src="${pageContext.request.contextPath}/assets/plugins/datatables/js/jquery.dataTables.min.js"></script>--%>
<script src="${pageContext.request.contextPath}/assets/pages/table-data.js"></script>
<!--End Page Level Plugin-->

<script>

    let pageNow = 1;

    function change111() {
        var size = $("#520").val()

        location.href = "${pageContext.request.contextPath}/sell/recommend?size=" + size;
    }

    let all = document.getElementById(`input-all`)
    let ches = document.querySelector("tbody").getElementsByTagName("input")
    all.onclick = function () {
        for (let i = 0; i < ches.length; i++) {
            ches[i].checked = this.checked
        }
    }
    for (let i = 0; i < ches.length; i++) {
        ches[i].onclick = function () {
            all.checked = this.checked
        }
    }

    function del(id) {
        let sure = confirm("确定删除吗？");
        if (sure) {
            location.href = "${pageContext.request.contextPath}/sell/deleteByRecommendProjectId/" + id;
        }
    }

    function dianji() {
        console.info("确认删除")
    }

    function shezhi(id) {
        location.href = "${pageContext.request.contextPath}/sell/setRecommendProjectSort?id=" + id;
    }

    function changeStatus(recommendStatus, id) {
        const GetRecommendStatus = $("#recommendStatus").val();
        if (recommendStatus == 1) {
            recommendStatus = 0;
        } else if (recommendStatus == 0) {
            recommendStatus = 1;
        }
        const subjectName = $("#subjectName").val();
        const page = pageNow;
        $.ajax({
            type: 'get',
            url: "${pageContext.request.contextPath}/sell/changeStatus",
            data: {
                "id": id,
                "page": page,
                "subjectName": subjectName,
                "recommendStatus": recommendStatus,
                "GetRecommendStatus": GetRecommendStatus,
            },
            success: function (result) {
                var rows = result.list;
                var html = '';
                for (var i = 0; i < rows.length; i++) {
                    html += '<tr style="text-align: center">';
                    html += '<td style="text-align: center"><input type="checkbox" id="checks"></td>'
                    var leaderNoVal = setNullToEmpty(rows[i].subjectId);
                    html += '<td style="text-align: center">' + leaderNoVal + '</td>';
                    var passwordVal = setNullToEmpty(rows[i].subjectName);
                    html += '<td style="text-align: center">' + passwordVal + '</td>';
                    var realNameVal = setNullToEmpty(rows[i].recommendStatus);
                    if (realNameVal == 1) {
                        html += '<td>' + '<i class="fa fa-toggle-on" aria-hidden="true" style="color: #0e90d2;font-size: 30px" onclick="changeStatus(' + rows[i].recommendStatus + ',' + rows[i].id + ')"></i>' + '</td>';
                    } else {
                        html += '<td>' + '<i class="fa fa-toggle-off" aria-hidden="true" style="color: #0e90d2;font-size: 30px" onclick="changeStatus(' + rows[i].recommendStatus + ',' + rows[i].id + ')"></i>' + '</td>';
                    }

                    var celPhoneVal = setNullToEmpty(rows[i].sort);
                    html += '<td style="text-align: center">' + celPhoneVal + '</td>';
                    var realNameVal = setNullToEmpty(rows[i].recommendStatus);
                    if (realNameVal == 1) {
                        html += '<td style="text-align: center">' + '推荐中' + '</td>';
                    } else {
                        html += '<td style="text-align: center">' + '不推荐' + '</td>';
                    }


                    html += '<td style="text-align: center">';
                    html += '<a href="${pageContext.request.contextPath}/sell/setRecommendProjectSort/' + rows[i].id + '" class="btn btn-info">设置排序</a>';
                    html += ' <button id="btn-delete" class="btn btn-danger" onclick="del(' + rows[i].id + ')">删除</button>';
                    html += '</td style="text-align: center">';
                    html += '</tr>';
                }
                $("#123").html(html)
                var html2 = '';
                var a = result.pages
                console.info(a)
                if (result.pageNum == 1) {
                    html2 += ''
                } else {
                    html2 += '<li><a  style="cursor: pointer" onclick="subjectSearch(' + result.prePage + ')">' + '<<' + '</a></li>'
                }
                for (var i = 1; i <= a; i++) {
                    if (i == result.pageNum) {
                        html2 += '<li class="active"><a  style="cursor: pointer" onclick="subjectSearch(' + i + ')">' + i + '</a>' + '</li>'
                        pageNow = i;
                    } else {
                        html2 += '<li><a style="cursor: pointer" onclick="subjectSearch(' + i + ')">' + i + '</a>' + '</li>'
                    }

                }
                if (result.pageNum == result.pages) {
                    html2 += ''
                } else {
                    html2 += '<li><a  style="cursor: pointer"     onclick="subjectSearch(' + result.nextPage + ')">' + '>>' + '</a></li>'
                }
                $("#abcd").html(html2)
            }
        });
    }

    function subjectSearch(a) {
        const subjectName = $("#subjectName").val();
        const recommendStatus = $("#recommendStatus").val();
        const page = a;
        $.ajax({
            type: 'get',
            url: "${pageContext.request.contextPath}/sell/recommend_1",
            data: {
                "page": page,
                "subjectName": subjectName,
                "recommendStatus": recommendStatus,
            },
            success: function (result) {
                var rows = result.list;
                var html = '';
                for (var i = 0; i < rows.length; i++) {
                    html += '<tr>';
                    html += '<td><input type="checkbox" id="checks"></td>'
                    var leaderNoVal = setNullToEmpty(rows[i].subjectId);
                    html += '<td>' + leaderNoVal + '</td>';
                    var passwordVal = setNullToEmpty(rows[i].subjectName);
                    html += '<td>' + passwordVal + '</td>';
                    var realNameVal = setNullToEmpty(rows[i].recommendStatus);
                    if (realNameVal == 1) {
                        html += '<td>' + '<i class="fa fa-toggle-on" aria-hidden="true" style="color: #0e90d2;font-size: 30px" onclick="changeStatus(' + rows[i].recommendStatus + ',' + rows[i].id + ')"></i>' + '</td>';
                    } else {
                        html += '<td>' + '<i class="fa fa-toggle-off" aria-hidden="true" style="color: #0e90d2;font-size: 30px" onclick="changeStatus(' + rows[i].recommendStatus + ',' + rows[i].id + ')"></i>' + '</td>';
                    }

                    var celPhoneVal = setNullToEmpty(rows[i].sort);
                    html += '<td>' + celPhoneVal + '</td>';
                    var realNameVal = setNullToEmpty(rows[i].recommendStatus);
                    if (realNameVal == 1) {
                        html += '<td>' + '推荐中' + '</td>';
                    } else {
                        html += '<td>' + '不推荐' + '</td>';
                    }


                    html += '<td>';
                    html += '<a href="${pageContext.request.contextPath}/sell/setRecommendProjectSort?id=' + rows[i].id + '" ><button class="btn-info">设置排序</button></a>';
                    html += ' <button id="btn-delete" class="btn-danger" onclick="del(' + rows[i].id + ')">删除</button>';
                    html += '</td>';
                    html += '</tr>';
                }
                $("#123").html(html)
                var html2 = '';
                var a = result.pages
                console.info(a)
                if (result.pageNum == 1) {
                    html2 += ''
                } else {
                    html2 += '<li><a  style="cursor: pointer" onclick="subjectSearch(' + result.prePage + ')">' + '<<' + '</a></li>'
                }
                for (var i = 1; i <= a; i++) {
                    if (i == result.pageNum) {
                        html2 += '<li class="active"><a  style="cursor: pointer" onclick="subjectSearch(' + i + ')">' + i + '</a>' + '</li>'
                        pageNow = i;
                    } else {
                        html2 += '<li><a style="cursor: pointer" onclick="subjectSearch(' + i + ')">' + i + '</a>' + '</li>'
                    }

                }
                if (result.pageNum == result.pages) {
                    html2 += ''
                } else {
                    html2 += '<li><a  style="cursor: pointer"     onclick="subjectSearch(' + result.nextPage + ')">' + '>>' + '</a></li>'
                }
                $("#abcd").html(html2)
            }
        });
    }


    function setNullToEmpty(val) {//将所有空数据都转为'-'
        if (val === null || val === 'null' || val === '' || val == undefined || val == 'undefined') {
            return '-';
        }
        return val;
    }
</script>
</body>

</html>

